<template>
  <div class="base-select">
    <div
      class="input-box"
      tabindex="111"
      ref="inputBox"
      @click="onShowList"
    >
      <div class="label-box" v-if="selectList.filter((item) => item.activate).length < 1">
        <span>{{ type | filterLabel }}</span>
        <i class="el-icon-arrow-down"></i>
      </div>
      <div class="mian-box" v-else>
        <div class="tags-box">
          <template v-for="(item, index) in selectList">
            <span v-if="item.activate" :key="item.id">
              <em>{{ item.content }}</em>
              <i class="el-icon-close" @click.stop="onDel($event,index)"></i>
            </span>
          </template>
        </div>
        <i class="el-icon-arrow-down"></i>
      </div>
    </div>

    <div class="select-box" v-show="isShow" tabindex="111" ref="selectBox">
      <div
        class="select-item"
        v-for="(item, index) in selectList"
        :key="item.id"
      >
        <input
          type="text"
          v-model="item.content"
          @blur="onSetInput(index)"
        />
        <div class="icon-box" @click="onSetItem(index)">
          <i class="el-icon-check" v-if="item.activate"></i>
          <i class="not" v-else></i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "BaseSelect",
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    index:{
      type:Number,
      default:0
    },
    type:{
      type:String,
      default: ''
    },
    res:{
      type:Array,
      default:()=>[]
    }
  },
  data() {
    return {
      selectList: [],
      isShow: false,
      selectLocation: {
        x: 0,
        y: 0,
        maxX: 0,
        maxY: 0,
      },
    };
  },
  created() {
    this.initData();
    window.addEventListener("click", this.onClick);
  },
  mounted() {
    const obj = this.$el.getBoundingClientRect();
    this.selectLocation.x = Math.ceil(obj.x);
    this.selectLocation.maxX = Math.ceil(obj.x + obj.width);
  },
  filters: {
    filterLabel:function(val){
      let label = ''
      switch (val) {
        case 'undertaker':
          label = '请选择承担人'
          break;
        case 'expenditure':
          label = '请选择支出对象'
          break
        case 'price':
          label = '请选择费用类别'
          break
        default:
          break;
      }
      return label
    }
  },
  methods: {
    initData() {
      this.selectList = JSON.parse(JSON.stringify(this.list)).map((item) => {
        this.$set(item, "activate", false);
        this.$set(item, "content", item.name);
        return item;
      });
      JSON.parse(JSON.stringify(this.res)).map(item=>{
        this.selectList.map(data=>{
          if(item.id === data.id){
            this.$set(data,'activate',true)
            this.$set(data,'content',item.content)
          }
        })
      })
    },
    onSetItem(index) {
      this.$refs.inputBox.focus();
      this.$set(
        this.selectList[index],
        "activate",
        !this.selectList[index].activate
      );
      this.onUpData();
      this.$nextTick(()=>{
        this.onSetPosition()
      })
    },
    onUpData() {
      let data = this.selectList.filter((item) => {
        if (item.activate) {
          return item;
        }
      });
      const obj = {
        index:this.index,
        type:this.type,
        list:data
      }
      this.$emit('getSelect',obj)
    },
    onDel(e,index) {
      this.$set(this.selectList[index], "activate", false);
      this.onUpData();
      this.onClick(e)
      this.$nextTick(()=>{
        this.onSetPosition();
      })
    },
    onShowList() {
      this.isShow = !this.isShow;
      if (this.isShow) {
        const obj = this.$el.getBoundingClientRect();
        this.$nextTick(() => {
          this.selectLocation.y = Math.ceil(obj.y);
          this.selectLocation.maxY = Math.ceil(
            obj.y + this.$refs.selectBox.offsetHeight + 10 + obj.height
          );
        });
      }
    },
    // 判断点击的位置
    onClick(e) {
      const { x, y, layerX, layerY } = e;
      const obj = {
        x: 0,
        y: 0,
      };
      obj.x = Math.ceil(x - layerX) + 1;
      obj.y = Math.ceil(y - layerY) + 1;
      if (!this.isShow) return;
      if (
        obj.x >= this.selectLocation.x &&
        obj.x <= this.selectLocation.maxX &&
        obj.y >= this.selectLocation.y &&
        obj.y <= this.selectLocation.maxY
      ) {
        this.isShow = true;
      } else {
        this.isShow = false;
      }
    },
    // 设置输入框
    onSetInput(index){
      if(this.selectList[index].activate){
        this.onUpData()
      }
    },
    // 设置下拉框定位
    onSetPosition(){
      const obj = this.$el.getBoundingClientRect();
      this.selectLocation.x = Math.ceil(obj.x);
      this.selectLocation.maxX = Math.ceil(obj.x + obj.width);
      let height = this.$el.offsetHeight + 10
      this.$refs.selectBox.style.top = `${height}px`
    }
  },
};
</script>

<style lang="scss" scoped>
.base-select {
  position: relative;
  .input-box {
    box-sizing: border-box;
    outline: none;
    width: 100%;
    // min-height: 40px;
    line-height: 40px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    color: #c1c4cc;
    font-size: 14px;
    text-align: left;
    &:focus {
      border-color: #34a1e0;
    }
    .label-box{
      display: flex;
      padding: 0 5px 0 15px;
      span{
        display: inline-block;
        width: 90%;
      }
      >i{
        display: inline-block;
        width: 10%;
        line-height: 40px;
      }
    }
    .mian-box {
      padding: 5px 5px 0 5px;
      width: 100%;
      height: 100%;
      display: flex;
      background-color: transparent;
      align-items: center;
      box-sizing: border-box;
      .tags-box {
        width: 90%;
        display: flex;
        flex-wrap: wrap;
        span {
          display: flex;
          align-items: center;
          margin-right: 5px;
          margin-bottom: 5px;
          cursor: pointer;
          padding: 2px 6px;
          line-height: 1;
          background-color: #f4f4f5;
          border: solid 1px #e9e9eb;
          color: #909399;
          border-radius: 4px;
          font-size: 12px;
          em{
            width: calc(100% - 14px);
          }
          i {
            background-color: #c1c4cc;
            padding-top: 1px;
            border-radius: 50%;
            width: 14px;
            height: 14px;
            text-align: center;
            line-height: 13px;
            &:hover {
              color: #fff;
            }
          }
        }
      }
      > i {
        width: 10%;
      }
    }
  }

  .select-box {
    position: absolute;
    top: 50px;
    left: 0;
    z-index: 9999;
    width: 100%;
    border: solid 1px #e4e7ed;
    border-radius: 4px;
    background-color: #fff;
    box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    margin: 5px 0;
    padding: 6px 0;
    outline: none;
    &::before {
      content: " ";
      position: absolute;
      z-index: 2;
      top: -8px;
      left: 15px;
      width: 0;
      height: 0;
      border-width: 0 8px 8px;
      border-style: solid;
      border-color: transparent transparent #fff;
      filter: drop-shadow(1px -2px 2px rgba(0, 0, 0, 0.1));
    }
    &::after {
      content: " ";
      position: absolute;
      z-index: 1;
      top: -9px;
      left: 14px;
      width: 0;
      height: 0;
      border-width: 0 9px 9px;
      border-style: solid;
      border-color: transparent transparent #e4e7ed;
    }
    .select-item {
      display: flex;
      height: 34px;
      line-height: 34px;
      padding-left: 20px;
      cursor: pointer;
      outline: none;
      input {
        width: 75%;
        outline: none;
        border: none;
        font-size: 14px;
      }
      &:hover {
        background-color: #f5f7fa;
        input {
          background-color: #f5f7fa;
        }
      }
      .icon-box {
        display: inline-block;
        width: 25%;
        height: 100%;
        text-align: center;
        line-height: 34px;
        outline: none;
        .not {
          display: inline-block;
          width: 14px;
          height: 14px;
          border-radius: 50%;
          border: solid 1px #000;
          outline: none;
        }
      }
    }
  }
}
</style>